<template>
    <div class="container">
        <ShopCartItem v-for="(item, i) in shopCart" :key="item.id" :id="item.id" :count="item.count" :selected="item.selected"
            :image="getImage(i)"/>
        <div class="total">
            <div class="info">
                <p>总计(不含运费)</p>
                <p>
                    已勾选商品<span>{{ getCountAndAmountForShopCart.selectedCount }}</span>件，
                    总价:<span>￥{{ getCountAndAmountForShopCart.selectedAmount }}</span>
                </p>
            </div>
            <Button type="danger">去结算</Button>
        </div>
    </div>
</template>

<script>
import { Button } from 'vant';
import { getImageList } from '../../services';
import ShopCartItem from '../../components/ShopCartItem';

export default {
    components: { ShopCartItem, Button },
    data() {
        return {
            imageList: null
        };
    },
    computed: {
        // 购物车
        shopCart() {
            return this.$store.state.shopCart;
        },
        // 购物车中的商品总数量
        getCountAndAmountForShopCart() {
            return this.$store.getters['shopCart/getCountAndAmount'];
        }
    },
    methods: {
        getImage(index) {
            if (this.imageList) {
                return this.imageList[(index % this.imageList.length)].url;
            } else {
                return '';
            }
        }
    },
    created() {
        getImageList(1693).then(imageList => this.imageList = imageList);
    }
}
</script>

<style lang="less" scoped>
.container {
    flex: 1;
    background-color: #eee;
    box-sizing: border-box;
    .total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        box-sizing: border-box;
        padding: 10px;
        color: #999;
        .info {
            span {
                font-weight: bold;
                color: red;
                margin: 0 3px;
            }
        }
    }
}
</style>